<template>
  <span class="disabled-wrapper">
    <span v-if="disabled" class="mask" />
    <a
      :class="{
        disabled: true,
        [type]: true,
      }"
      href=""
    >
      <slot />
    </a>
  </span>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: 'default',
    },
    disabled: Boolean,
  },
}
</script>

<style lang="less" scoped>
.disabled-wrapper {
  display: inline-block;
  position: relative;
  margin: 20px;
}
.mask {
  background: rgba(255, 255, 255, .7);
  display: inline-block;
  width: 100%;
  height: 100%;
  position: absolute;
  cursor: not-allowed;
}
.disabled {
  text-decoration: none;

  &.default {
    color: #333;
  }

  &.primary {
    color: #00eeff;
  }

  &.danger {
    color: red;
  }

  &:hover {
    text-decoration: underline;
  }
}

</style>
